<template>
  <div class="root">
    <div>
      <span class="basic">报价</span>
    </div>
    <el-form
      :model="form"
      style="max-width: 1000px; margin-top: 20px"
      label-width="150px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="报价条款:">
            <el-select
              v-model="form.clauseid"
              placeholder="CFR/CIF/DDU/DAP/DDP/其他"
              style="width: 240px"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.clause"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="RMB费用:">
            <el-input
              v-model="form.fee"
              autocomplete="off"
              placeholder="单行输入"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="海运费USD:">
            <el-input
              v-model="form.seefeeusd"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目的港费用合计:">
            <el-input
              v-model="form.objectfee"
              autocomplete="off"
              placeholder="单行输入"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="报价有效期:">
            <el-date-picker
              v-model="form.vidtime"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="date"
              placeholder="请选择"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="海运费合计:">
            <el-input
              v-model="form.seefeetotal"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="船公司:">
            <el-input
              v-model="form.company"
              autocomplete="off"
              placeholder="单行输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="航次:">
            <el-input
              v-model="form.voyage"
              autocomplete="off"
              placeholder="单行输入"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="航程:">
            <el-input
              v-model="form.voyagen"
              autocomplete="off"
              placeholder="单行输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上传截图:">
            <el-upload
              class="avatar-uploader"
              :action="host + '/upload/img'"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import host from "@/utils/env.js";
import { useRoute } from "vue-router";
import { getQuote } from "@/api/forworder/forworder.js";
import { getClause } from "@/api/forworder/clause.js";
const route = useRoute();
const enquiryCode = route.query.enquiryCode; // 获取传递的询价编号
const ordercode = route.query.ordercode;
const imageUrl = ref("");
const form = ref({
  fee: "",
  seefeeusd: "",
  objectfee: "",
  vidtime: "",
  seefeetotal: "",
  company: "",
  voyage: "",
  voyagen: "",
  screenshot: "",
  clauseid: 1,
  enquiryCode: enquiryCode
});
const options = ref([]);
/**
 * 上传成功
 * @param response
 * @param uploadFile
 */
const handleAvatarSuccess = (response, uploadFile) => {
  if (response.code == 200) {
    //上传成功
    imageUrl.value = URL.createObjectURL(uploadFile.raw);
    form.value.screenshot = response.data;
  }
};

/**
 * 文件上传前的限制
 * @param rawFile
 */
const beforeAvatarUpload = rawFile => {
  console.log(form.value.screenshot);
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("请上传jpg、png格式的文件");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片不能超过2MB!");
    return false;
  }
  return true;
};
async function getList() {
  let res = await getQuote(enquiryCode);
  form.value = res.data;
}

async function getClauseList() {
  let res = await getClause();
  options.value = res.data;
}
// 初始化加载列表
onBeforeMount(() => {
  getList();
  getClauseList();
});
</script>

<style scoped>
.root {
  width: 95vw;
  background-color: #fff;
  border-radius: 5px;
}
.basic {
  font-size: 24px;
  font-weight: bold;
  color: #0054a6;
  margin-left: 30px;
  margin-top: 20px;
  display: inline-block;

  border-style: none;
  border-left: #0054a6 solid 4px;
  padding-left: 10px;
}

:deep(.avatar-uploader .avatar) {
  width: 128px;
  height: 128px;
  display: block;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  text-align: center;
}
</style>
